<template>
  <div class="backgroundimage table-wrapper">
    <el-table
      :data="tableData"
      style="width: 100%,"
      :header-cell-style="{ color: '#202020', fontSize: '18px' }"
      :row-style="tableRowStyle"
    >
      <el-table-column label="科目" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ subjecttype(scope.row.type) }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="文章名"
        width="150"
        show-overflow-tooltip
        prop="article_name"
        align="center"
      >
      </el-table-column>

      <el-table-column
        label="作者"
        width="120"
        show-overflow-tooltip
        prop="writer"
        align="center"
      >
      </el-table-column>

      <el-table-column
        label="内容"
        width="150"
        prop="content"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>

      <el-table-column
        label="上传时间"
        width="180"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            {{ new Date(scope.row.upload_time).toLocaleString() }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="阅读人数"
        width="100"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.view_num }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="收藏人数"
        width="100"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.collection_num }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >开始阅读
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @next-click="next"
      @prev-click="prev"
      :current-page="currentPage"
      :page-sizes="[8]"
      :page-size="size"
      layout="total, sizes, prev, pager, next"
      :total="total"
      style="margin-top:-9px;margin-left:33%;"
    >
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../assets/commons";
export default {
  data() {
    return {
      uid: 0,
      currentPage: 1, //当前页
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小
      tableData: [], //总数据
      type_subject: [
        "语文",
        "数学",
        "英语",
        "政治",
        "历史",
        "地理",
        "物理",
        "化学",
        "生物"
      ]
      //背景图片
    };
  },
  methods: {
    //
    tableRowStyle({ row, rowIndex }) {},
    //科目映射
    subjecttype(subject) {
      return this.type_subject[subject - 1];
    },
    //点击阅读文章跳转
    handleEdit(index, row) {
      console.log(row);
      this.$store.commit("setArticle", row);
      this.$router.push("/student/stu_personal/read_article");
    },

    //分页
    findPassArticle() {
      axios
        .get(
          commons.baseUrl +
            "student/findPassArticle?page=" +
            this.currentPage +
            "&size=" +
            this.size
        )
        .then(res => {
          this.tableData = res.data.data;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
        });
    },

    //下一页
    next() {
      this.currentPage = this.currentPage + 1;
      this.findPassArticle();
    },

    //上一页
    prev() {
      this.currentPage = this.currentPage - 1;
      this.findPassArticle();
    }
  },
  mounted() {
    //axios  get请求
    //调用方法获取第一页数据
    this.findPassArticle();
  },
  computed: {}
};
</script>
<style scoped lang="less">
.backgroundimage {
  margin-left: -24px;
  margin-top: -30px;
  width: 102.3%;
  height: 102.6%;
  padding: 10px;
  background: url("../../assets/img/780.jpg") no-repeat scroll 100% 100%;
  background-size: auto;
  background-size: cover;
}
.table-wrapper /deep/ .el-table--fit {
  padding: 15px;
}
/*最外层透明*/
//控制选择多少条每页的
/deep/ .el-input__inner,
//操作的按钮
/deep/ .el-button,
//显示阅读次数的样式
/deep/ .el-tag,
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-pagination button,
/deep/ .el-pagination ul li,
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}
/* 删除表格下最底层的横线 */
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

.el-table {
  font-size: 16px;
  color: #1b1b1b;
}
.el-button {
  color: #000000;
}
/deep/ .el-tag,
/deep/ .el-pagination button,
/deep/ .el-pagination__total,
/deep/ .el-input__inner {
  color: #000000;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: transparent;
}
</style>
